<!DOCTYPE html>
<html>
    <head>
        <title>vue tab</title>
        <style>
            .main{
                width: 660px;
                margin: 0 auto;
            }
            ul{
                text-align: center;
            }
            ul li{
                display: inline-block;
                /* text-align: center; */
                width: 120px;
                cursor: pointer;
            }
            .tabCon{
                border: 1px solid;
            }

            .active{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="app" class="main">
            <ul class="nav">
                <li v-for="(item, index) in tabs" @click="tab(index)" :class="{active: index == num}">
                    {{item}}
                </li>
            </ul>
            <div class="tabCon">
                <div v-for="(item, index) in tabContents" v-show="index == num">
                    {{item}}
                </div>
            </div>
        </div>
        <!-- <script src="./vue.js" type="text/javascript"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data(){
                return {
                    tabs: ["Home", "javascript", "cpp", "python"],
                    tabContents: ["hello world", "learn js", "learn cpp", "learn python"],
                    num: 0,
                }
            },
            methods:{
                tab: function(index){
                    this.num = index;
                }
            }
        })
        </script>
    </body>
</html>